<template>
  <view class="container">
    <up-status-bar></up-status-bar>
    <up-status-bar></up-status-bar>

    <view>

      <view class="page-top">
        <view class="page-top-left">
          茶疗馆
        </view>
        <view class="page-top-right">
          <image src="https://img.clc1319.com/static/img/homePage/img_03.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="notification-box" @click="$goURl('/pages/index/notice')">
        <image src="https://img.clc1319.com/static/img/homePage/img_01.png" mode="widthFix"></image>

        <u-notice-bar icon='' bgColor='' color='#000' :text="noticeData[0] && noticeData[0].content || '暂无公告!'"></u-notice-bar>
      </view>
      <view v-if="swiperList.length" style="width: 690rpx;border-radius: 16rpx;overflow:hidden;margin:0 auto 20rpx">
        <!-- <newTop :banners="item"></newTop> -->
        <bgSwiper :showSwiper="true" :list="swiperList" topPadding="0"></bgSwiper>
        <!-- <carousel :data="item"></carousel> -->
      </view>


      <view v-for="(item,index) in explain" :key="index">
        <view>
          <!-- 导航栏组件 -->
          <view v-if="item.type == 'info'">
            <!-- <uni-nav-bar :title="item.title" statusBar :backgroundColor="item.navBackgroundColor"
              :border="false" :color="item.titleColor"></uni-nav-bar> -->
            <!-- 头部背景 -->
            <!-- <view class="headerBgColor" :style="{backgroundColor:item.pageBgColor}"></view> -->
          </view>
          <!-- 轮播图 -->
          <view v-if="item.type == 'banner'">
            <!-- <newTop :banners="item"></newTop> -->
            <bgSwiper :list="item.data"></bgSwiper>
            <!-- <carousel :data="item"></carousel> -->
          </view>
          <!-- 搜索 -->
          <view v-if="item.type == 'search'">
            <view class="input-view" @click="$goURl(`/pages/index/search`)">
              <view class="input-view-box">
                <text>输入商品名称</text>
              </view>
              <view class="input-view-right">
                <uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
              </view>
            </view>
          </view>
          <!-- 通告 -->

          <!-- 功能区 -->

        </view>
      </view>

      <view class="content-box">

        <view class="menu-box">
          <view class="menu-box-flex">
            <view class="menu-box-flex-box" v-for="item in images.partition" @click="handeleGoTO(item)">
              <image class="is-icon" :src="item.img" mode="scaleToFill"></image>
              <view class="is-text">
                {{item.name}}
              </view>
            </view>

          </view>
        </view>


        <!-- <view class="notification-box" @click="$goURl('/pages/index/notice')">
          <image src="https://img.clc1319.com/static/img/homePage/img_01.png" mode="widthFix"></image>

          <u-notice-bar icon='' bgColor='' color='#000' :text="noticeData[0] && noticeData[0].content || '暂无公告!'"></u-notice-bar>
        </view> -->
        <!-- 精品 -->

        <!-- 今日推荐 -->
        <view class="recommend-box">
          <view class="box-title">
            <image src="https://img.clc1319.com/static/img/homePage/img_02.png" mode="widthFix"></image>
            今日推荐
          </view>
          <view class="list-box" @click="gogoodsdetail(images.list[0].ID)" v-if="images.list.length >0">
            <view class="list-box-left">
              <image class="list-box-left" :src="images.list[0].img" mode="aspectFill"></image>
            </view>
            <view class="list-box-right">
              <view class="right-text">
                {{images.list[0].title}}
              </view>
              <view class="right-tips">
                {{images.list[0].name}}
              </view>

              <view class="right-num">
                已售 1120
              </view>
              <view class="right-bottom">
                <view class="bottom-num">
                  <text>￥</text>
                  <text class="num-box">{{images.list[0].price}}</text>
                </view>
                <view class="bottom-but">
                  立即购买
                </view>
              </view>
            </view>
          </view>

          <view class="fine-works" v-if="carouselList.length > 0">
            <view class="fine-works-left" @click="toPage(1)">
              <image class="fine-works-left" :src="carouselList[0].img" mode=""></image>
            </view>
            <view class="fine-works-right">
              <image class="fine-works-right" :src="carouselList[1].img" mode=""></image>

            </view>
          </view>
        </view>

        <!-- 商品列表 -->

        <view class="goods-box">
          <view class="box-title">
            <image src="https://img.clc1319.com/static/img/homePage/img_02.png" mode="widthFix"></image>
            <view class="">
              更多商品
            </view>
            <!-- 	<view class="box-more">
                查看更多
                <uni-icons type="right" size="18"></uni-icons>
              </view> -->
          </view>

          <view class="list-flex">
            <view class="flex-box" v-for="item in data.goodlistData" @click="gogoodsdetail(item.ID)">
              <view class="bg-box">
                <image class="bg-box" :src="item.img" mode="aspectFill"></image>
              </view>
              <view class="box-text">
                {{item.name}}
              </view>
              <view class="num-box">
                <text>￥</text>
                <text class="num">{{item.price}}</text>
              </view>
            </view>
          </view>

        </view>

      </view>

    </view>

  </view>
</template>

<script setup>
// 秒杀
// import KillGoodsList from "@/components/home/goods/killGoodsList.vue"
// //商品列表
// import carousel from "@/components/home/carousel/carousel.vue"
// //轮播图
// import GoodsList from "@/components/home/goods/goodsList.vue"
// // 砍价
// import bargain from "@/components/home/bargain/bargain.vue"
// //图片
// import posterbox from "@/components/home/image/poster.vue"
// //图片模式2
// import posterbox2 from "@/components/home/image/poster2.vue"
// //导航
// import navigation from "@/components/home/navigation/navigation.vue"
// // 公告
// import notice from "@/components/home/notice/notice.vue"
// //秒杀
// import instant from "@/components/home/instant/instant.vue"
// //拼团
// import groupBooking from "@/components/home/groupBooking/groupBooking.vue"
// //辅助分割
// import division from "@/components/home/division/division.vue"
// //宣传标题
// import propagate from "@/components/home/propagate/propagate.vue"
// //视频
// import videoDemo from "@/components/home/videoDemo/videoDemo.vue"
// //新前端顶部容器
// import newTop from "@/components/home/new-top/new-top.vue"
import bgSwiper from "@/components/home/bg-swiper/bg-swiper.vue"

import {
  ref,
  reactive,
  getCurrentInstance,
  watch
} from "vue";
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onReachBottom
} from "@dcloudio/uni-app";
const {
  appContext,
  proxy
} = getCurrentInstance();
import {
  useStore
} from 'vuex';
const store = useStore();
const decorationData = store.state.decorationData
let explain = reactive([]) //页面所有数据
const bgcolor = ref() //页面背景颜色
const bgimg = ref() //页面背景
const bgheight = ref() //页面背景daxiao
const goodList = ref() //推荐商品的
const isShow = ref(false)
const popUpWindow = ref(false)
const carouselList = ref([])
let share = ref() //砍价分享
let sharese = ref() //拼团分享
let images = reactive({
  partition: [],
  list: []
})




let goodbargaining = ref({
  user: {
    head: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
    nickname: '测试',
    mobile: '13048448888',

  },
  goods: {
    img: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
    name: '测试',
  },
  ID: 0
})
let goodLists = ref({
  goods: {
    img: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
    name: '测试',
  }
})
let goodListse = ref({
  head: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
  nickname: 'https://pili-vod.guanxikeji.com/template/img/1709602500291.png',
  mobile: '13048448888',
})
let arrse = ref([])
const data = reactive({
  page: 0,
  size: 20,
  pages: 1,
  goodlistData: [], // 推荐商品
  navBarTitle: "这是一个导航",
  pageBgColor: "$green",
  // 轮播数据
  swiperList: [{
    colorClass: 'uni-bg-red',
    url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
    content: '内容 A'
  }, {
    colorClass: 'uni-bg-green',
    url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
    content: '内容 B'
  }, {
    colorClass: 'uni-bg-blue',
    url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
    content: '内容 C'
  }],
  // 指示点数据
  dotStyle: {
    backgroundColor: 'rgba(0, 0, 0, .3)',
    border: '1px rgba(0, 0, 0, .3) solid',
    color: '#fff',
    selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
    selectedBorder: '1px rgba(0, 0, 0, .9) solid'
  },
  current: 0,
  mode: 'round',
  swiperDotIndex: 0,
  // 公告
  notice: [{
    content: "这是一段公告1"
  }],
  // 功能导航
  navigation: [
    [{
      img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      name: '内容 B'
    }, {
      img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      name: '内容 B'
    }, {
      img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      name: '内容 B'
    }, {
      img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      name: '内容 B'
    }]
  ],
  list: [{
    name: '10:11',
    list: [],
    subheading: '即将开始'
  }, {
    name: '12:11',
    list: [],
    subheading: '即将开始'
  }],

})
const handeleGoTO=(item)=>{
  uni.setStorageSync('partitionID', item.ID)
  proxy.$goURl(`/pages/goods/category`)

}
const noticeData = ref([])
const swiperList= ref([])
onLoad((option) => {
  data.page = 0
  data.pages = 1

  data.goodlistData = []
  getIndex()
  getPartition()
  getCarouselSet()
  getNoticeData()
})
onShow(() => {
  if(data.goodlistData.length==0){
    getIndex()
    getPartition()
    getCarouselSet()
    getNoticeData()
  }


  uni.getClipboardData({
    success: function(res) {

      uni.hideLoading()
      if (res.data.indexOf('砍价') != -1) {
        let str = res.data.substring(res.data.length - (res.data.length - 29))
        bargaining(str.slice(1, str.length - 2))

      } else if (res.data.indexOf('拼团') != -1) {
        let str = res.data.substring(res.data.length - (res.data.length - 29))
        bargainingse(str.slice(1, str.length - 2))
      }
    },
    fail: function(err) {
      // console.log(err, )
    }
  });
  try {
    popUpWindow.value = uni.getStorageSync("popUpWindow") || false
  } catch (e) {

    popUpWindow.value = false
    //TODO handle the exception
  }

})
onPullDownRefresh(() => {
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
})
//下拉刷新
onReachBottom(() => {
  getGoodData()
})

function getNoticeData() {
  appContext.config.globalProperties.$request({
    url: `api/index/`,
    method: 'GET',
    success(res) {
      if (res.errno == 0) {
        noticeData.value = res.data.notice
        swiperList.value = res.data.carousel
        console.log(res.data,'12312312')
      }
    }
  })
}

function getCarouselSet() {
  appContext.config.globalProperties.$request({
    url: `api/carouselList/?code=3&page=1&size=3`,
    method: 'get',
    success(res) {
      carouselList.value = res.data.data
      console.log(carouselList.value,'1232')
    }
  })
}

//拼团
function bargainingse(id) {
  appContext.config.globalProperties.$request({
    url: `api/teamwork/joiningGroups/${id}/`,
    method: 'post',
    success(res) {
      if (res.errno == 0) {
        let userlist = res.data.userList
        console.log(uni.getStorageSync('userInfo').mobile, "mobileid")
        console.log(userlist, "userlist")
        userlist.forEach((items) => {
          if (items.mobile == uni.getStorageSync('userInfo').mobile) {
            arrse.value.push(items)
          }


        })
        console.log(arrse, "arrse")
        if (arrse.value.length == 0) {
          goodLists.value = res.data.data
          goodListse.value = res.data.userList[0]
          sharese.value.open()
        } else {
          uni.showToast({
            icon: 'none',
            title: '参加过了哦！'
          })
        }
      }

    }
  })
}
//砍价
function bargaining(id) {
  console.log(id, parseInt(id), " Number(id)")
  appContext.config.globalProperties.$request({
    url: `api/bargaining/bargainingList/`,
    method: 'post',
    data: {
      id: Number(id)
    },
    success(res) {
      if (res.errno == 0 && res.data.user.mobile != uni.getStorageSync('userInfo').mobile) {
        goodbargaining.value = res.data
        share.value.open()
      }
    }
  })
}

function setId(id) { //截取后4位
  try {
    return id.substring(id.length - 4)
  } catch (e) {
    return '****'
  }
}

function goURlee(item) {
  uni.navigateTo({
    url: '/subPackages/commodity/bargaining/myGroupBuyinglist/createorderGroupCY'
  })
  share.value.close()
  uni.setStorageSync('goodlist', item)
  uni.setClipboardData({
    data: '',
    success: function() {
      console.log('success');
    }
  });
}

function goURle(urls) {
  uni.navigateTo({
    url: urls
  })
  share.value.close()
  uni.setClipboardData({
    data: '',
    success: function() {
      console.log('success');
    }
  });
}

function setPopUpWindow() {
  popUpWindow.value = true
  uni.setStorageSync("popUpWindow", true)
}

function shopClassList() {
  proxy.$request({
    url: `api/shopClassList/?page=1&size=999`,
    method: 'get',
    success(res) {}
  })
}
//获取首页格式
function getIndex() {
  explain = []
  // explain = JSON.parse(uni.getStorageSync('explain')) || decorationData
  explain.forEach((it) => {
    if (it.type == 'info') {
      bgcolor.value = it.backgroundColor
      bgimg.value = it.backgroundImage
      bgheight.value = it.height
    }
    it.tabType = parseInt(it.tabType);
  })
  getGoodData()
  console.log('explain', explain)
}

function getGoodData() {
  if (data.page < data.pages) {
    data.page++
    appContext.config.globalProperties.$request({
      url: `api/goods_list_all/0/?page=${data.page}&size=${data.size}&is_index=1&is_single=-1`,
      method: 'get',
      success(resd) {
        if (resd.errno == 0) {
          data.pages = Math.ceil(resd.data.total / data.size)
          data.goodlistData = resd.data.data
          isShow.value = true
          console.log('goodlistData', data.goodlistData)
        }
      }
    })
  }
}
//获取分区
function getPartition() {
  appContext.config.globalProperties.$request({
    url: `api/partition/?page=1&size=8`,
    method: 'get',
    success(res) {
      if (res.errno == 0) {
        console.log("partition", res.data.data)
        images.partition = res.data.data
        getRewardGoods()
      }
    }
  })
}
//获取报单区商品
function getRewardGoods() {
  appContext.config.globalProperties.$request({
    url: `api/goods_list_all/0/?page=1&size=10&is_index=1&is_single=1`,
    method: 'get',
    success(res) {
      if (res.errno == 0) {
        console.log("goods_list_all", res.data.data)
        images.list = res.data.data
      }
    }
  })
}
function gogoodsdetail(id) {
  uni.navigateTo({
    url: '/subPackages/commodity/details?id=' + id
  })
}
function toPage(id) {
  uni.navigateTo({
    url: '/pages/goods/indexGoods?is_single=' + id
  })
}

function toPages() {
  uni.navigateTo({
    url: '/subPackages/commodity/category?id=2'
  })

}
</script>

<style lang="scss" scoped>
.container {
  background-image: url('https://img.clc1319.com/static/img/homePage/img_04.png');
  background-size: 100%;
  // position: relative;
  min-height: calc(100vh - 50px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .page-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx 15rpx 30rpx;
    padding-top: 40rpx;
    font-size: 40rpx;
    color: #fff;
    .page-top-right{
      display: flex;
      align-items: center;
      image{
        width: 52rpx;
      }
    }
  }
  // 头部背景颜色
  .headerBgColor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    background-color: #00C356;
    height: 220px;
  }

  // 头部
  .header {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00C356;
    padding: 0 30upx;

    .left {
      font-size: 13px;
      font-weight: bold;
      color: #fff;
      z-index: 99;
    }

    .rightSearch {
      width: calc(100% - 160upx);
    }
  }

  uni-swiper {
    height: auto;
  }

  // 轮播
  .swiperdotbox {
    margin: 30upx;

    .swiper-box {
      .swiperImage {
        width: 100%;
        height: 100%;
        border-radius: 30upx;
      }
    }
  }


}

.popUpWindow {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 80vw;
    position: relative;

    .closeempty {
      // position: absolute;
      // right: 0;
      // top: -10px;
      // z-index: 9999;
      display: flex;
      justify-content: center;
      margin-bottom: 20rpx;
    }

    image {
      width: 100%;
    }
  }
}

::v-deep .uni-noticebar {
  margin: 0;
}

// 搜索
.input-view {

  display: flex;
  flex-direction: row;
  // width: 500rpx;
  flex: 1;
  background-color: #f5f5f5;
  justify-content: space-between;
  height: 70upx;
  border-radius: 30px;
  flex-wrap: nowrap;
  margin: $padding;
  line-height: 30px;
  overflow: hidden;

  .input-view-box {
    display: flex;

    text {
      height: 30px;
      line-height: 70upx;
      width: 370rpx;
      padding: 0 0 0 30upx;
      font-size: 16px;
      color: #9f9f9f;

    }
  }

  .input-view-right {
    // background-color: red;
    border-radius: 30px;
    padding: 4upx 20upx;
    color: #FA301B;
  }
}


.content-box{
  position: relative;
  z-index: 210;
  .menu-box{
    margin: 28rpx 30rpx 20rpx 30rpx;
    max-height: 352rpx;
    background: linear-gradient( 180deg, #FFFFFF 0%, #EDFFEE 100%);
    border-radius: 24rpx;
    padding: 32rpx 0 0 0;
    .menu-box-flex{
      display: flex;
      align-items: center;

      flex-wrap: wrap;
      .menu-box-flex-box{
        text-align: center;
        width: 25%;
      }
    }
    .is-icon{
      width: 92rpx;
      height: 92rpx;
      margin: auto;
      border-radius: 50%;
    }
    .is-text{
      font-size: 24rpx;
      color: #000000;
      text-align: center;
      margin: 12rpx 0 24rpx 0;
    }
  }
  .fine-works{
    display: flex;

    margin: 30rpx;
    justify-content: space-between;
    image{
      width: 100%;
      height: 100%;
    }
    .fine-works-left{
      width: 49%;
      height: 244rpx;
      height: 416rpx;

      border-radius: 16rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .fine-works-right{
      width: 49%;
      height: 244rpx;
      border-radius: 16rpx;
      image {
        width: 100%;
        height: 100%;
      }
      .right-top{
        height: 200rpx;

        border-radius: 16rpx;
        margin-bottom: 8px;
      }
      .right-bottom{
        height: 200rpx;
        background-color: red;
        border-radius: 16rpx;
        margin-top: 8px;

      }
    }
  }
  .box-title{
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    margin: 0 30rpx;
    display: flex;
    align-items: center;
    image{
      width: 59rpx;
      margin-right: 10rpx;
    }
    position: relative;
    .box-more{
      position: absolute;
      right: 0;
      font-weight: 500;
      font-size: 24rpx;
      color: #454545;
      display: flex;
      align-items: center;
    }
  }
  .recommend-box{
    .list-box{

      background: #FFFFFF;
      border-radius: 24rpx;
      border: 2rpx solid #2E7D32;
      margin: 0 30rpx;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
      display: flex;

      justify-content: space-between;
      padding: 30rpx;
      .list-box-left{
        width: 280rpx;
        height: 280rpx;

      }
      .list-box-right{
        width: 334rpx;
        .right-text{
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
        }
        .right-tips{
          font-weight: 500;
          font-size: 24rpx;
          color: #52A256;
          margin-top: 16rpx;
        }
        .right-num{
          font-weight: 500;
          font-size: 24rpx;
          color: #696969;
          margin-top: 70rpx;
        }
        .right-bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .bottom-num{
            font-weight: bold;
            font-size: 20rpx;
            color: #2E7D32;
            .num-box{
              font-size: 32rpx;
            }
          }
          .bottom-but{
            width: 146rpx;
            height: 52rpx;
            background: #2E7D32;
            border-radius: 54rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
    }
  }
  .goods-box{
    .list-flex{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 28rpx 30rpx;
      .flex-box{
        background-color: #fff;
        width: 49%;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        .bg-box{
          height: 336rpx;
          width: 336rpx;
        }
        .box-text{
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          margin: 18rpx 10rpx 0 10rpx;
        }
        .num-box{
          margin-top: 20rpx;
          font-weight: bold;
          font-size: 20rpx;
          color: #2E7D32;
          margin-left: 10rpx;
          .num{
            font-size: 32rpx;
          }
        }
      }
    }
  }
}
.notification-box{
  margin: 0 30rpx;
  height: 68rpx;
  background: #FFFFFF;
  border-radius: 46rpx;
  display: flex;
  align-items: center;
  padding-left: 15rpx;
  border-radius: 16rpx;
  margin-bottom: 22rpx;
  image{
    width: 122rpx;
  }
}

</style>
<style>
page {
  background-color: #F0F4F9;
  /* filter: grayscale(100%);  */
  /* 如果你想要更平滑的过渡效果，可以添加transition */
  /* transition: filter 0.3s ease-in-out; */
}
</style>
